{% extends "oa/base.html" %}
{% block header_nav %}{% endblock %}
{% block this_css %}
    <style>
        .form-group {
            padding-bottom: 5px
        }
    </style>
{% endblock %}
{% block content %}
    <section class="wrapper" style="padding-top: 10px ">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-inline" method="get" action="{{ request.path }}">
                        <div class="form-group">
                            <label for="id_get_all">全部数据</label>
                            <input type="checkbox" name="get_all" id="id_get_all"
                                   {% if request.GET.get_all %}checked{% endif %}>
                        </div>
                        <div class="form-group">
                            <select name="gb" id="id_gb" class="form-control">
                                <option value="">统计方式</option>
                                {% for gb in gbs %}
                                    {% if gb.name|escape == request.GET.gb|escape %}
                                        <option value="{{ gb.name }}" selected>{{ gb.display }}</option>
                                    {% else %}
                                        <option value="{{ gb.name }}">{{ gb.display }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="pt" id="id_pt" class="form-control">
                                <option value="">包装类型</option>
                                {% for  pt in pack_types %}
                                    {% if pt.pk|escape == request.GET.pt|escape %}
                                        <option value="{{ pt.pk }}" selected>{{ pt.name }}</option>
                                    {% else %}
                                        <option value="{{ pt.pk }}">{{ pt.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="is_draft" id="is_draft" class="form-control">
                                <option value="">产品类型</option>
                                {% for  pt in is_drafts %}
                                    {% if pt.pk|escape == request.GET.is_draft|escape %}
                                        <option value="{{ pt.pk }}" selected>{{ pt.name }}</option>
                                    {% else %}
                                        <option value="{{ pt.pk }}">{{ pt.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="channel_id" id="id_channel_id" class="form-control">
                                <option value="">选择渠道</option>
                                {% for channel in channels %}
                                    {% if channel.pk|escape == request.GET.channel_id|escape %}
                                        <option value="{{ channel.pk }}" selected>{{ channel.name }}</option>
                                    {% else %}
                                        <option value="{{ channel.pk }}">{{ channel.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="customer_level_id" id="id_customer_level_id"
                                    class="form-control">
                                <option value="">选择客户类别</option>
                                {% for customer_level in customer_levels %}
                                    {% if customer_level.pk|escape == request.GET.customer_level_id|escape %}
                                        <option value="{{ customer_level.pk }}"
                                                selected>{{ customer_level.level_name }}</option>
                                    {% else %}
                                        <option value="{{ customer_level.pk }}">{{ customer_level.level_name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date_start">开始日期：</label>
                            <input type="date" class="form-control" id="date_start" name="date_start"
                                   value="{{ request.GET.date_start }}">
                        </div>
                        <div class="form-group">
                            <label for="date_end">截止日期：</label>
                            <input type="date" class="form-control" id="date_end" name="date_end"
                                   value="{{ request.GET.date_end }}">
                        </div>
                        <div class="form-group">
                            <input type="text" autocomplete="off" name="q" value="{{ request.GET.q }}"
                                   placeholder="搜索产品名称" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" autocomplete="off" name="salesman" value="{{ request.GET.salesman }}"
                                   placeholder="搜索销售员" class="form-control">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default"><span>搜索</span></button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <section class="panel">
                <header class="panel-heading tab-bg-dark-navy-blue">
                    <ul class="nav nav-tabs">
                        <li class="">
                            <a data-toggle="tab" href="#product_sales_chart" aria-expanded="false">
                                柱状图
                            </a>
                        </li>
                        <li class="active">
                            <a data-toggle="tab" href="#product_sales_chart_2" aria-expanded="true">
                                折线图
                            </a>
                        </li>
                    </ul>
                </header>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="product_sales_chart_2" class="tab-pane active"></div>
                        <div id="product_sales_chart" class="tab-pane"></div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-lg-4">
            <div class="panel  panel-default">
                <div class="panel-heading">
                    根据包装类型统计 <span style="padding:20px"> 共 {{ total_count }} 条记录</span>
                </div>
                <div class="panel-body">
                    <ul>
                        {% for year,v1 in sales.items %}
                            <li>
                                {{ year }}
                                <ul>
                                    {% for week,v2 in v1.items %}
                                        <li>
                                            {{ week }}
                                            <ul>
                                                {% for product,sales in v2.items %}
                                                    <li>
                                                        {{ product }} ({{ sales.amount|floatformat }}{{ sales.unit }})
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block this_js %}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script language="JavaScript">
        Highcharts.chart('product_sales_chart', {
            credits: {enabled: false},
            chart: {type: 'bar',},
            title: {text: '产品销售统计'},
            xAxis: {
                categories: {{ year_gbs|safe }},
            },
            yAxis: {
                min: 0,
                title: {text: '销售统计'}
            },
            legend: {
                reversed: true,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {enabled: true}
                }
            },
            series: {{ series_data|safe }}
        });

        Highcharts.chart('product_sales_chart_2', {
            chart: {
                type: 'spline',
                inverted: true
            },
            credits: {enabled: false},
            title: {text: '产品销售统计'},

            yAxis: {title: {text: '销售统计'}},
            xAxis: {categories: {{ year_gbs|safe }}},

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },

            plotOptions: {
                series: {
                    dataLabels: {enabled: true}
                }
            },

            series: {{ series_data|safe }},

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }

        });
    </script>
    <script>
        $('#id_date_start').datepicker({language: "zh-CN"});
        $('#id_date_end').datepicker({language: "zh-CN"});
    </script>
{% endblock %}
